<template>
  <div class="page-box">
    <div class="title-card-box">
      <TitleCard :iconClassName="'el-icon-s-finance'" :title="'提现管理'"></TitleCard>
    </div>

    <div class="panbox">
      <div class="panbox-item pit1-bg">
        <div class="panbox-item-ex">
          <div class="head-box">
            <div class="left-box">
              <div class="pi-img-box pit1-bg p-7">
                <img
                  src="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0904/413a0202509041810527114.png" />
              </div>
              <div class="left-title">邻事豆</div>
            </div>
            <div class="right-box pit1-r-c">
              可提现/互转
            </div>
          </div>

          <div class="body-box">
            <div class="body-title pit1-c f-space">8642   豆</div>
            <div class="flex-text m-t-20">社区和区县的奖励类型，可提现，也可互转</div>
            <div class="flex-text m-t-10">
              <div>待释放:</div>
              <div class="f-space fw c-b">1245  豆</div>
            </div>
            <div class="flex-text m-t-10">
              <div>昨日收益:</div>
              <div class="f-space fw c-b">1245  豆</div>
            </div>
            <div class="flex-text m-t-10">
              <div>累计收益:</div>
              <div class="f-space fw c-b">1245  豆</div>
            </div>
          </div>
        </div>
      </div>

      <div class="full-fix"></div>

      <div class="panbox-item pit2-bg">
        <div class="panbox-item-ex">
          <div class="head-box">
            <div class="left-box">
              <div class="pi-img-box pit2-bg p-5">
                <img
                  src="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0904/4fa08202509041811255936.png" />
              </div>
              <div class="left-title">消费券</div>
            </div>
            <div class="right-box pit2-r-c">
              1券=1元
            </div>
          </div>

          <div class="body-box">
            <div class="body-title pit2-c f-space">8642   券</div>
            <div class="flex-text m-t-20">社区和区县的奖励类型，可提现，也可互转</div>
            <div class="flex-text m-t-10">
              <div>待释放:</div>
              <div class="f-space fw c-b">1245  券</div>
            </div>
            <div class="flex-text m-t-10">
              <div>昨日收益:</div>
              <div class="f-space fw c-b">1245  券</div>
            </div>
            <div class="flex-text m-t-10">
              <div>累计收益:</div>
              <div class="f-space fw c-b">1245  元</div>
            </div>
          </div>
        </div>
      </div>

      <div class="full-fix"></div>

      <div class="panbox-item pit3-bg">
        <div class="panbox-item-ex">
          <div class="head-box">
            <div class="left-box">
              <div class="pi-img-box pit3-bg p-5">
                <img
                  src="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0904/5fdcd202509041811537671.png" />
              </div>
              <div class="left-title">兑换券</div>
            </div>
            <div class="right-box pit3-r-c">
              产品兑换
            </div>
          </div>

          <div class="body-box">
            <div class="body-title pit3-c f-space">8642   券</div>
            <div class="flex-text m-t-20">社区和区县的奖励类型，可提现，也可互转</div>
            <div class="flex-text m-t-10">
              <div>待释放:</div>
              <div class="f-space fw c-b">1245  券</div>
            </div>
            <div class="flex-text m-t-10">
              <div>昨日收益:</div>
              <div class="f-space fw c-b">1245  券</div>
            </div>
            <div class="flex-text m-t-10">
              <div>累计收益:</div>
              <div class="f-space fw c-b">1245  件</div>
            </div>
          </div>
        </div>
      </div>





    </div>



    <div class="table-box">
      <CustomizeTable :columns="columns" :fetch-data="fetchTableData" permission-prefix="withdrawal:manage"
        :show-selection="true" :show-index="false" :export-file-name="'提现'" :init-search-form="{}"
        :showOperation="false" @reset="reset" ref="table">

      </CustomizeTable>


    </div>

  </div>
</template>

<script>
  import {

  } from '@/constants/statusMap';
  import {
    toString
  } from "@/utils/tools.js";

  import CustomizeTable from "@/components/CustomizeTable.vue";

  export default {
    components: {

      CustomizeTable,

    },
    data() {
      return {

        dialogVisible: false,
        currentRow: null,
        columns: [

          {
            prop: "baseInfo",
            label: "基本信息",
            slot: "baseInfo",
            width: "200px"

          },



          {
            prop: "linshicoin_balance",
            label: "邻事币"
          },
          {
            prop: "integral",
            label: "积分"
          },
          {
            prop: "follow_num",
            label: "关注数量"
          },


          {
            prop: "create_time",
            label: "创建时间"
          },
          {
            prop: "last_login_time",
            label: "最后登录时间"
          },


        ],



        searchForm: {


        },
      };
    },
    methods: {

      hangToString(val) {
        return toString(val)
      },
      // 获取表格数据
      async fetchTableData(params = {}) {

        const postData = Object.assign({}, params, this.searchForm);
        try {
          const result = await this.$httpRequest.post('/user/list', postData)
          console.log('-------fetchTableData----', result)
          return result
        } catch (e) {
          this.$message.error(e.message)
          throw e // 保持错误继续向上传递
        }

      },
      //重置
      reset() {


      },
      // 编辑
      handleEdit(row) {
        // 打开编辑对话框逻辑
        this.currentRow = {
          ...row
        }; // 可深拷贝
        this.dialogVisible = true;
      },

      // 删除
      async handleDelete(row) {
        console.log("删除:", row);
      },

      // 状态变更
      async handleStatusChange(row) {
        console.log("状态变更:", row);
        this.$message.success("状态更新成功");
      },

      handleApprove(payload) {
        console.log("-----状态变更----:", payload);
        this.$httpRequest.post('/user/status', payload).then(result => {
          console.log('--approved---result------', result)
          if (result.code == 0) {
            this.$message.success('完成状态修改')
            this.$refs.table.refresh()
          } else {
            this.$message.error('状态修改失败')
          }
        }).catch(e => {
          this.$message.error(e.message)
        });
      },



    },
  };
</script>

<style>
  .page-box {
    padding: 20px;

  }

  .panbox {
    display: flex;
    justify-content: space-between;
    align-content: center;
    background-color: #fff;
    width: 100%;
    padding: 30px;
    box-sizing: border-box;
    min-height: 360px;
  }

  .panbox-item {
    display: flex;
    align-items: center;
    flex: 1;
    padding: 20px 50px;
    box-sizing: border-box;
    border-radius: 20px;

    position: relative;
    height: 150px;
  }


  .panbox-item-ex {
    width: 100%;
    padding: 20px 50px;
    box-sizing: border-box;
    border-radius: 10px;
    background-color: #fff;
    position: absolute;
    top: 5px;
    left: 0;
    box-shadow: 2px 2px 2px 2px #efefef;

  }


  .pit1-bg {
    background-color: #ff6b6b;
  }

  .pit1-r-c {
    background-color: #ff6b6b1A;
    color: #ff6b6b;
  }

  .pit1-c {
    color: #ff6b6b;
  }


  .pit2-bg {
    background-color: #4ecdc4;
  }

  .pit2-r-c {
    background-color: #4ecdc41A;
    color: #4ecdc4;
  }

  .pit2-c {
    color: #4ecdc4;
  }

  .pit3-bg {
    background-color: #45b7d1;
  }

  .pit3-r-c {
    background-color: #45b7d11A;
    color: #45b7d1;
  }

  .pit3-c {
    color: #45b7d1;
  }










  .pi-img-box {
    width: 45px;
    height: 45px;
    border-radius: 10px;

    box-sizing: border-box;
    overflow: hidden;
  }


  .p-10 {
    padding: 10px;
  }

  .p-5 {
    padding: 5px;
  }

  .pi-img-box img {
    width: 100%;
    height: 100%;
  }

  .panbox-item-title-box {
    padding-left: 20px;
    box-sizing: border-box;
  }

  .full-fix {
    width: 20px;
    height: 40px;
  }

  .table-box {

    width: 100%;
    margin-top: 60px;
  }

  .head-box {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .right-box {
    padding: 5px 15px;
    box-sizing: border-box;
    border-radius: 40px;
    font-size: 14px;

  }

  .left-box {
    display: flex;
    align-items: center;
  }

  .left-title {
    font-size: 22px;
    font-weight: 600;
    color: #111;
    margin-left: 10px;
  }

   .body-box{
     margin-top: 20px;
   }

  .body-title {
    font-size: 40px;
    font-weight: 600;
  }

  .ex-box {
    display: flex;
    flex-direction: column;

  }

  .flex-text{
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #666;
  }
</style>
